<template>
	<div class="LIFE">
		<header>
			<ul>
				<li :class="classname1" @click="change1">听花LIFE</li>
				<li @click="change2" :class="classname2">活动</li>
				<span class="line"></span>	
			</ul>
		</header>
		<div class="main">
			<div class="wrap">
				<div class="lifeing lt min"><lifeing></lifeing></div>
				<div class="lifeactive lt min"><lifeactive></lifeactive></div>	
			</div>	
		</div>
	</div>
</template>
<style type="text/css" lang="less" scoped>
		header{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 40px;
			line-height: 40px;
			border-bottom: 0.2px solid 	#EAEAEA;
			background: #fff;
		ul{
			width: 190px;
			margin: 0 auto;
			overflow: hidden;
			position: relative;
			z-index: 99;
				li{
				float: left;
				width: 50%;
				text-align: center;
				position: relative;
			}
		}	
		.active-li{
			color: #008B8B;
		}
		.line{
			position: absolute;
			bottom: 0;
			height: 2px;
			display: block;
			width: 60px;
			left:14px;
			transition: all .1s linear;
			background: #008B8B;
		}
	}
	.LIFE{
		overflow: hidden;
	}
	.main{
		overflow: hidden;
		margin-bottom: 40px;
	}
	.min{
		transition: all .2s linear;
		margin-left: 0;
		width: 50%;
	}
	.wrap{
		width: 200%;
		height: auto;
	}
</style>

<script type="text/javascript">
	import lifeing from './lifeing'
	import lifeactive from './lifeactive'
	export default{
		data(){
			return{
				flag:"gcmin",
				classname1:"active-li",
				classname2:"",
				line:"",
				lifeing:'',
				lifeactive:'',
				lifeingel:"",
				lifeactiveel:""
			}
		},
		components:{
			lifeing,
			lifeactive
		},
		methods:{		
			change1(){
				this.flag='lifeing';
				this.classname1="active-li";
				this.classname2="";
				this.line.style.left="18px";
				//console.log(this.lifeingel)
				this.lifeingel.style.marginLeft="0";
			},
			change2(){
				this.flag='lifeactive';
				this.classname1="";
				this.classname2="active-li";
				this.line.style.left="114px";
				this.lifeingel.style.marginLeft="-100%";
			}
		},
		mounted(){
			var line=document.getElementsByClassName("line")[0];
			this.lifeingel=	document.getElementsByClassName("lifeing")[0];
			this.lifeactiveel=document.getElementsByClassName("lifeactive")[0];
			this.line=line;
		}
	}
</script>